<template>
  <div>
    <!-- 背景图 -->
    <div class="home">
      <img src="@/assets/img/bg@2x.png" alt="" style="margin-bottom:52px;" />
      <img src="@/assets/img/pic@2x.png" alt="" />
      <div class="homeTop">
        <img src="@/assets/img/logo@2x.png" alt="" class="homeLogo" />
        <div class="homeStart">{{ $t('Start_charging') }}</div>
        <div class="homeStart homeStart2">{{ $t('AnywhereAnytime') }}</div>
      </div>
    </div>

    <div class="bottom_div" v-if="showDown">
      <div class="bottom_btn1" @click="openApp">
        {{ $t('open_App') }}
      </div>
      <div class="bottom_btn1 bottom_btn2" @click="downloadApp">
        {{ $t('download_App') }}
      </div>
    </div>

    <!-- loading -->
    <van-overlay
      :show="showMask"
      z-index="99999"
      :custom-style="{ background: 'rgba(255,255,255,0)' }"
    >
      <div class="wrapper">
        <van-loading type="spinner" color="var(--text-color)" />
      </div>
    </van-overlay>

    <!-- 邀请异常提示 -->
    <van-overlay
      :show="showTip"
      z-index="99999"
      :custom-style="{ background: 'rgba(255,255,255,0)' }"
    >
      <div class="wrapper">
        <div class="textTip">
          <img src="@/assets/img/ic_warn@2x.png" alt="" class="tipImg" />{{
            $t('inviteTip')
          }}
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import api from '@/assets/js/api/register'
export default {
  data () {
    return {
      appScheme: 'joltzly://app/splash?invitepartner=', // app-scheme
      showMask: false, // 显示loading遮罩层
      showTip: false, // 显示结果遮罩层
      inviteText: '', // 邀请加密文本
      showDown: false
    }
  },
  created () {
    this.getLang()
  },
  mounted () {
    if (this.isWeiXin()) {
      this.global.toast(this.$t('weiXin'))
      return
    }
    this.showMask = true
    let urL = window.location.href
    let urls = urL.split('?')[1]
    let params = new URLSearchParams(urls)
    this.inviteText = params.get('invite') || ''
    this.appScheme = this.appScheme + this.inviteText
    if (this.inviteText) {
      this.verifyInvite()
    } else {
      this.showTip = true
      this.showMask = false
    }
  },
  methods: {
    // 校验邀请链接
    verifyInvite () {
      api.verifyInvite(this.inviteText).then(res => {
        if (res.code == '0') {
          this.showMask = false
          this.showDown = true
        } else {
          this.global.toast(res.message)
          this.showTip = true
          this.showMask = false
        }
      })
    },

    // 获取系统语言
    getLang () {
      let langArr = this.global.terminal.language.split('-')
      let lang = langArr[0].toLocaleUpperCase()
      const langAll = ['EN', 'ZH', 'ES']
      if (!langAll.includes(lang)) {
        lang = 'EN'
      }
      this.$store.commit('SET_LANG', lang)
      this.$i18n.locale = lang
    },

    // 判断是否微信打开
    isWeiXin () {
      var ua = window.navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true
      } else {
        return false
      }
    },

    // 下载 / 打开app
    downloadApp () {
      let appType = this.global.terminal.platform
      const iosDownloadUrl = 'itms-apps://itunes.apple.com/app/id1535224308' //ios-下载链接
      const androidDownloadUrl =
        'https://play.google.com/store/apps/details?id=com.standard.usa' //安卓-下载链接

      if (appType.android) {
        window.location.href = androidDownloadUrl
      } else if (appType.ios) {
        window.location.href = iosDownloadUrl
      }
    },

    openApp () {
      // 尝试打开 scheme
      window.location.href = this.appScheme
    }
  }
}
</script>

<style scoped lang="scss"></style>
